<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Regular Expression Tester</title>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<style type="text/css">
#resultSection { display:none; }
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
		var regObject = {};
			
		function displayResults(message) {
			if ($('#resultSection:visible').length==0) $('#resultSection').show();
			$('#testResults').html('<p>' + message + '</p>');
		}
		
		function buildResults() {
			var resultString="No match"; // default setting
			
			var formatSearch = regObject.testString.replace(regObject.regex,'<strong class="found">$&</strong>');
			

			switch (regObject.method) {
				case 'search' :
					if(regObject.results==-1) break; // no match
					resultString = 'Found at position ' + regObject.results;
					resultString += ' in string:<br>' + formatSearch + '';
					break;
				case 'match' : 
					if (! regObject.results) break; // no match
					resultString = '';
					for (i in regObject.results) {
						resultString += (i + ':');
						if (i == 'input') {
							resultString += (formatSearch);
						} else {
							resultString += regObject.results[i];
						}
						resultString += '<br>';
					}
					break;
				case 'replace' :
					if (regObject.results==regObject.testString) break; // no match
					resultString = '';
					resultString += regObject.results;
					break;
			}
			var prependString = "Regex: " + regObject.reValue + "<br>";
			return prependString + resultString;
		}
				
	

			
		$('#regexTester').submit(function() {
			
			//get string
			regObject.testString = $('#string').val();
			
			//any options
			regObject.options='';
			$(':checkbox:checked').each(function() {
				regObject.options += $(this).val();																 
			});
			
			
			//get regular expression value and convert to regex
			regObject.reValue = $('#regex').val();
			try {
			regObject.regex = new RegExp(regObject.reValue,regObject.options);
			} catch (e) {
				displayResults("ERROR IN YOUR REGULAR EXPRESSION<br>" + e);
				return false;
			}
			
			//method
			regObject.method = $('[name=method]:checked').val();
			
			//replace
			if (regObject.method=='replace') {
				regObject.replaceString = $('#replaceString').val();
			}
			
			if (regObject.method=='search') {
				regObject.results = regObject.testString.search(regObject.regex);
			} else if (regObject.method=='match')  {
				regObject.results = regObject.testString.match(regObject.regex);
			}	else {
				regObject.results = regObject.testString.replace(regObject.regex,'<strong class="found">' + regObject.replaceString + "</strong>");
			}
			displayResults(buildResults());
		
				
	
			return false;
			
	  });
		
		//hide replacement box until needed
		$('#replaceBox').hide();
		//show replacement box when replace selected
		$('#replace').click(function() {
			$('#replaceBox').show('fast')
		 });
		//hide replacement box if either of the other two buttons selected
		$('#search, #match').click(function() {
			$('#replaceBox').hide('fast')
		});
});



</script>
<style type="text/css">
<!--
.found {
	color: #F00;
}
.medium {
	width: 50%;
}
#replaceBox {
	font: 1.6em Georgia, "Times New Roman", Times, serif;
	margin-bottom: 20px;
}
-->
</style>
</head>
<body id="twoCol">
<div id="container">
  <div id="banner"><img src="../images/banner.png" alt="JavaScript: The Missing Manual" width="760" height="65"><span id="badge"><a href="http://www.sawmac.com/missing/js/"></a></span></div>
  
  <div id="contentWrap">
  <div id="main">
  <h1>Regular Expression Tester  </h1>
  <div class="section" id="testSection">
  <form action="" method="post" name="form1" id="regexTester">
      <h2>Test</h2>
    <p>
      <label for="string" class="label">String to search</label>
          <textarea name="string" rows="3" class="wide" id="string"></textarea>
      </p>
    <p>
      <label for="regex" class="label">Regular Expression to use</label>
      <input name="regex" type="text" class="wide" id="regex">
      </p>
    <p><span class="label">Method to Use</span>
      <label>
        <input name="method" type="radio" id="search" value="search" checked>
        Search</label>
      &nbsp;&nbsp;
      <label>
        <input type="radio" name="method" id="match" value="match">
        Match</label>
      &nbsp;&nbsp; 
      <label>
        <input type="radio" name="method" id="replace" value="replace">
        Replace</label>
    </p>
    <div id="replaceBox">
      <label for="replaceString">Replace with:</label>
      <input name="replaceString" type="text" class="medium" id="replaceString">
    </div>
    <p><span class="label">Options</span>
<label>
        <input name="case" type="checkbox" id="case" value="i">
        Case Insensitive</label>
      &nbsp;&nbsp;
      <label>
        <input name="global" type="checkbox" id="global" value="g">
        Global</label>
</p>
  
      <input type="submit" name="button" id="button" value="Run">
    
  </form>
  </div>
  <div class="section" id="resultSection">
  <h2>Results <small>(Matched text in red)</small></h2>
  <div id="testResults">&nbsp;</div>
  </div>
</div>
  
  <div id="sidebar">
    <h2>regex tester</h2>
</div>
  </div>
 
<div id="footer"><em>&#8220;Building Interactive Web Sites with JavaScript&#8221;</em></div>
</div>
</body>
</html>
